<template>
	<view>
		<view class="header">
			<i class="ri-function-fill" style="color:#7800BE;font-size:14px;"></i>
			<!-- <i-icon size="20upx" color="#7800BE" name="function-fill"></i-icon> -->
			控制台
			<i class="ri-arrow-right-s-line" style="color:#666;font-size:14px;"></i>
			<!-- <i-icon size="20upx" color="#666" name="arrow-right-s-line"></i-icon> -->
			个人电子账户
		</view>
		<view class="bl">
			<view class="h1">
				<i class="ri-computer-line" style="color:#999;font-size:16px;"></i>
				<!-- <i-icon size="30upx" color="#999" name="computer-line"></i-icon> -->
				电子账户
			</view>
		</view>
		<view v-if="openState ==1">
			<!-- 未开户成功页面 -->
			<view style="text-align: center;margin-top: 8%;">
				<i class="ri-shield-keyhole-line" style="color:#7800BE;font-size:100px;"></i>
				<!-- <i-icon size="200upx" color="#7800BE" name="shield-keyhole-line"></i-icon> -->
				<view style="font-size: 30px;margin: 0px 30px 30px 30px;">{{stateInfo}}</view>
				<view class="bz">
					<button style="width: 160px;text-align: center;" @click="rodeData()">
						<i class="ri-shield-keyhole-line" style="color:#fff;font-size:12px;"></i>
						<!-- <i-icon size="20upx" color="#fff" name="shield-keyhole-line"></i-icon> -->
						开通电子账户
					</button>
				</view>
			</view>
		</view>
		<view v-else-if="openState==2">
			<!-- 开户成功页面 -->
			<view class="qbbg">
				<image src="../../static/zbyh.png" style="height: 85px;padding: 30px 60px 20px 60px;"></image>
				<view style="margin: 20px 0px 20px 100px;">
					<view class="bk b10" style="font-size: 30px;">
						{{openData.bankAccName}}
					</view>
					<view style="font-size: 30px;color: #7800BE;margin-top: 10px;">
						{{openData.virtualAccNo}}
					</view>
				</view>
				<view class="bc" style="margin: 0px 0px 0px 100px;padding-bottom: 40px;">
					<view class="bk b10 r30">
						当前余额：￥{{openData.bal}}
					</view>
					<button @click="tixian()">提现</button>
				</view>
			</view>
			<view class="bl">
				<view class="h1">
					<i class="ri-computer-line" style="color:#999;font-size:22px;"></i>
					<!-- <i-icon size="30upx" color="#999" name="computer-line"></i-icon> -->
					基本信息
				</view>
			</view>
			<view class="qbbg">
				<view class="bc" style="height: 80px;line-height: 80px;margin-left: 100px;">
					<view class="bk" style="width:150px;">ID</view>
					<view>{{openData.id}}</view>
				</view>
				<view class="bc" style="height: 80px;line-height: 80px;margin-left: 100px;">
					<view class="bk" style="width:150px;">姓名</view>
					<view>{{openData.userName}}</view>
				</view>
				<view class="bc" style="height: 80px;line-height: 80px;margin-left: 100px;">
					<view class="bk" style="width:150px;">身份证号</view>
					<view>{{openData.cerNo}}</view>
				</view>
				<view class="bc" style="height: 80px;line-height: 80px;margin-left: 100px;">
					<view class="bk" style="width:150px;">银行预留号码</view>
					<view>{{openData.mobile}}</view>
				</view>
				<view class="bc" style="height: 80px;line-height: 80px;margin-left: 100px;">
					<view class="bk" style="width:150px;">开户时间</view>
					<view>{{openData.openTime}}</view>
				</view>
			</view>
			<view class="bl">
				<view class="h1">
					<i class="ri-computer-line" style="color:#999;font-size:22px;"></i>
					<!-- <i-icon size="30upx" color="#999" name="computer-line"></i-icon> -->
					绑定银行
				</view>
			</view>
			<view class="qbbg">
				<view class="bc" style="height: 80px;line-height: 80px;margin-left: 100px;">
					<view class="bk" style="width:150px;">开户行</view>
					<view>{{openData.bankName}}</view>
				</view>
				<view class="bc" style="height: 80px;line-height: 80px;margin-left: 100px;">
					<view class="bk" style="width:150px;">银行卡号</view>
					<view class="r30">{{openData.acctNo}}</view><button @click="bankState = 1">修改信息</button>
				</view>
			</view>
		</view>
		<view v-else-if="openState == 2">
			<!-- 审核状态 -->
			当前开户状态：{{stateInfo}}
			<button @click="rodeData()">重新提交</button>
		</view>
		<view v-else-if="openState == 2">
			<!-- 失败状态 -->
			当前开户状态：{{stateInfo}}
			<button @click="rodeData()">重新提交</button>
		</view>
		<!-- 右边拉出银行列表 -->
		<uni-drawer ref="showRight" mode="right" :mask-click="true">
			<scroll-view style="height: 100%;" scroll-y="true">
				<view v-for="item in array" :key="item" @click="getBankname(item)">{{ item }}</view>
			</scroll-view>
		</uni-drawer>
		<view v-if="bankState==1" class="p-tkb">
			<view class="p-tkh"></view>
			<view class="p-tk">
				<view class="tb">
					<view class="titem">
						<i class="ri-add-circle-fill" style="color:#7800BE;font-size:20px;"></i>
						<!-- <i-icon size="20upx" color="#7800BE" name="add-circle-fill" class="r10"></i-icon> -->
						修改银行卡信息
					</view>
					<i class="ri-close-circle-fill" style="color:#f73164;font-size:20px;" @click="bankState=false"></i>
					<!-- <i-icon size="25upx" color="#f73164" name="close-circle-fill"></i-icon> -->
				</view>
				<view class="com">
					<view class="li bc">
						<view class="wz">选择银行</view>
						<view class="nr"><input type="text" v-model="alter.bankName" placeholder="开户行"
								@click="showDrawer" />
						</view>
					</view>
					<view class="li bc">
						<view class="wz">银行卡号</view>
						<view class="nr">
							<view class="nr"><input type="number" v-model="alter.bankCardNo"></view>
						</view>
					</view>
					<view class="li bc">
						<view class="wz">开户姓名</view>
						<view class="nr"><input type="text" v-model="alter.bankAccName"></view>
					</view>
					<view class="li bc">
						<view class="wz">银行预留号码</view>
						<view class="nr"><input type="number" v-model="alter.mobile"></view>
					</view>
					<view class="li bc">
						<view class="wz">验证码</view>
						<view class="nr">
							<input type="number" v-model="alter.messageCode">
							<button @click="getBankCode()">{{title}}</button>
						</view>
						<view class="bc red" style="font-size: 12px;">
							<i class="ri-information-fill" style="color:#f73164;font-size:20px;"></i>
							<!-- <i-icon size="20px" color="#f73164" name="information-fill"></i-icon> -->
							短信会发送至原预留手机号，请注意查收
						</view>
					</view>
					<view class="bc" style="margin-left: 90px;">
						<button type="button" @click="alterInfo()" style="width: 100px;">
							<i class="ri-arrow-right-s-line" style="color:#fff;font-size:14px;"></i>
							<!-- <i-icon size="20upx" color="#fff" name="arrow-right-s-line"></i-icon> -->
							确定修改
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stateInfo: '您未开通电子账户',
				DataName: '',
				DataCerNo: '',
				bankState: false,
				openState: 0,
				openData: {
					virtualAccName: '周某',
					virtualAccNo: '6800030125666011011080221',
					bal: '300000'
				},
				array: ["﻿中国工商银行", "中国农业银行", "中国银行", "中国邮政储蓄银行", "中国建设银行", "国家开发银行", "中国进出口银行", "中国农业发展银行", "交通银行", "中信银行",
					"中国光大银行银行", "华夏银行",
					"中国民生银行", "广发银行", "平安银行", "招商银行", "兴业银行", "桂林银行", "广西北部湾银行", "上海浦东发展银行", "北京银行", "天津银行", "河北银行",
					"唐山银行股份", "秦皇岛银行股",
					"邯郸银行", "邢台银行", "保定银行", "张家口银行", "承德银行", "沧州银行", "廊坊银行", "衡水银行", "晋商银行", "大同银行", "阳泉市商业银行", "长治银行",
					"晋城银行", "晋中银行", "内蒙古银行", "包商银行", "乌海银行", "盛京银行", "鄂尔多斯银行", "大连银行", "鞍山银行", "抚顺银行", "本溪市商业银行",
					"丹东银行", "锦州银行", "葫芦岛银行", "营口银行", "营口沿海银行", "阜新银行", "辽阳银行", "盘锦银行", "铁岭银行", "朝阳银行", "吉林银行", "哈尔滨银行",
					"龙江银行", "南京银行", "江苏银行", "苏州银行", "江苏长江商业银行", "杭州银行", "宁波东海银行", "宁波银行", "宁波通商银行", "温州银行", "嘉兴银行",
					"湖州银行", "绍兴银行", "金华银行", "浙江稠州商业银行", "台州银行", "浙江泰隆商业银行", "浙江民泰商业银行", "福建海峡银行", "厦门银行", "泉州银行",
					"江西银行", "九江银行", "赣州银行", "上饶银行", "齐鲁银行", "青岛银行", "齐商银行", "枣庄银行", "东营银行", "烟台银行", "潍坊银行", "济宁银行",
					"泰安银行", "莱商银行", "威海市商业银行", "德州银行股份", "临商银行股份", "日照银行股份", "郑州银行", "中原银行", "洛阳银行", "平顶山银行股",
					"焦作中旅银行", "汉口银行", "湖北银行", "华融湘江银行", "长沙银行", "广州银行", "珠海华润银行", "广东华兴银行", "广东南粤银行", "东莞银行",
					"柳州银行", "海南银行", "成都银行", "重庆银行", "自贡银行", "攀枝花市商业银行", "泸州市商业银", "长城华西银行",
					"绵阳市商业银行", "遂宁银行股份", "乐山市商业银行", "宜宾市商业银", "四川天府银行", "达州市商业银行", "雅安市商业银行", "凉山州商业银行", "贵阳银行",
					"贵州银行", "富滇银行", "曲靖市商业银行", "云南红塔银行", "西藏银行", "西安银行", "长安银行", "兰州银行", "甘肃银行", "青海银行股份", "宁夏银行",
					"石嘴山银行", "乌鲁木齐银行", "昆仑银行", "哈密市商业银行", "库尔勒银行", "新疆汇和银行", "天津滨海农村商业银行", "大连农村商业银行", "无锡农村商业银行",
					"江苏江阴农村商业银行", "江苏江南农村商业银行", "太仓农村商业银行", "江苏昆山农村", "吴江农村商业银行", "江苏常熟农村商业银行", "张家港农村商业银行",
					"广州农村商业银行", "广东顺德农村银行", "海口联合农村银行", "成都农商银行", "重庆农村商业银行", "恒丰银行", "浙商银行", "天津农村商业银行", "渤海银行",
					"徽商银行", "重庆三峡银行", "上海农商银行", "天津金城银行", "上海华瑞银行", "浙江网商银行", "重庆富民银行", "上海银行", "北京农村商业银行",
					"河北省农村商业银行", "山西省农村商业银行", "内蒙古农村商业银行", "辽宁省农村商业银行", "吉林省农村商业银行", "黑龙江农村商业银行", "江苏省农村商业银行",
					"浙江省农村商业银行", "宁波鄞州农村商业银行", "安徽省农村商业银行", "福建省农村商业银行", "江西省农村商业银行", "山东省农村商业银行", "河南省农村商业银行",
					"湖北省农村商业银行", "武汉农村商业银行", "湖南省农村商业银行", "广东省农村信用合作联社", "深圳农村商业银行", "东莞农村商业银行", "广西省农村信用合作联社",
					"海南省农村商业银行", "四川省农村信用合作联社", "贵州省农村信用合作联社", "云南省农村信用合作联社", "陕西省农村商业银行", "甘肃省农村商业银行", "青海省农村信用合作联社",
					"宁夏省农村信用合作联社", "新疆省农村商业银行", "温州民商银行", "深圳前海微众银行", "四川新网银行", "众邦银行",
					"南阳村镇银行股份有限公司"
				],
				alter: {
					id: '', //原id
					phone: '', //原手机号
					bankName: '', //银行名称
					bankAccName: '', //开户姓名
					bankCardNo: '', //银行卡号
					mobile: '', //预留号码
					messageCode: '', //短信验证码
				},
				timer: 60,
				title: '获取验证码',
			}
		},
		onLoad() {
			this.getWalletInfo();
		},
		methods: {
			/**
			 * 选择银行方法
			 */
			showDrawer() {
				this.$refs.showRight.open();
			},
			closeDrawer() {
				this.$refs.showRight.close();
			},
			getBankname(item) {
				//console.log(item)
				this.alter.bankName = item;
				this.$refs.showRight.close();
			},
			/**
			 * 修改银行信息
			 */
			alterInfo() {
				console.log(this.alter)
				let _this = this;
				uni.request({
					url: _this.baseURL + "/gr/up/data",
					method: 'POST',
					header: {
						'token': uni.getStorageSync('token')
					},
					data: _this.alter,
					success(res) {
						console.log(res)
						if (res.data.success == true) {
							_this.bankState = false;
							_this.findPersonBal(); //查余额
							uni.showToast({
								title: res.data.message,
								icon: 'success',
								duration: 2500
							})
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'error',
								duration: 2500
							})
						}
					},
					fail(err) {
						console.log(err)
						uni.showToast({
							title: err.message,
							icon: 'error',
							duration: 2500
						})
					}
				})
			},
			/**
			 * 获取短信验证码
			 */
			getBankCode() {
				let _this = this;
				if (_this.alter.bankName == '') {
					uni.showToast({
						title: '请输入您的开户行',
						icon: 'none',
						duration: 2000
					})
					return;
				}

				if (_this.alter.bankAccName == '') {
					uni.showToast({
						title: '请输入您的开户名',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (_this.alter.bankCardNo == '') {
					uni.showToast({
						title: '请输入您的银行卡号',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (_this.alter.mobile == '' || _this.alter.mobile.length != 11) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
						duration: 2000
					})
					return;
				}

				if (_this.timer == 60) {
					_this.disabled = true

					let timer1 = setInterval(() => {
						_this.timer--;
						_this.title = _this.timer + '秒后重试'
						if (_this.timer == 0) {
							clearInterval(timer1);
							_this.timer = 60;
							_this.disabled = false
							_this.title = '获取验证码'
							return;
						}
					}, 1000);
				}
				uni.request({
					url: _this.baseURL + '/gr/get/code?mobile=' + _this.alter.phone + '&cerNo=' + _this.openData
						.cerNo + '&userName=' +
						_this.openData.userName + '&acctNo=' + _this.openData.acctNo,
					method: 'POST',
					header: {
						'token': uni.getStorageSync('token')
					},
					dataType: 'json',
					success: (res) => {
						console.log(res)
						if (res.data.success == true) {
							uni.showToast({
								title: '短信已发送至原手机号',
								icon: 'success',
								duration: 3000
							})
						}
						if (res.data.success == false) {
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 2000
							})
						}
					}
				})
			},
			/**
			 * 去往开通页面
			 */
			rodeData() {
				uni.reLaunch({
					url: 'account-gr-add'
				})
			},
			/**
			 * 去往提现页面
			 */
			tixian() {
				let rData = this.openData;
				uni.reLaunch({
					url: 'account-tixian?accType=gr&virtualAccName=' + rData.virtualAccName +
						'&virtualAccNo=' + rData.virtualAccNo + '&bal=' + rData.bal +
						'&bankName=' + rData.bankName + '&acctNo=' + rData.acctNo +
						'&bankAccName=' + rData.bankAccName
				})
			},
			// 获取钱包信息
			getWalletInfo() {
				let _this = this
				uni.request({
					url: _this.baseURL + '/gr/find/one',
					method: "POST",
					header: {
						'token': uni.getStorageSync('token')
					},
					success(res) {
						console.log(res)
						if (res.data.success == true) {
							let rData = res.data.data[0];
							_this.DataName = rData.userName;
							_this.DataCerNo = rData.cerNo;
							_this.stateInfo = rData.state;
							_this.findOpenState()
						} else {
							_this.openState = 1;
						}
					}
				})
			},
			/** 查询开户状态 */
			findOpenState(e) {
				let _this = this
				uni.request({
					url: _this.baseURL + '/gr/open/state?userName=' + _this.DataName + '&cerNo=' + _this.DataCerNo,
					method: "GET",
					header: {
						'token': uni.getStorageSync('token')
					},
					success(res) {
						console.log(res)
						if (res.data.code == '9600') {
							_this.stateInfo = '审核中，预计五分钟';
							_this.openState = 3; //审核状态
						} else
						if (res.data.success == true) {
							_this.findPersonBal();
						} else {
							_this.openState = 4; //失败状态
						}
					}
				})
			},
			/**  查询账户余额 */
			findPersonBal() {
				let _this = this
				uni.request({
					url: _this.baseURL + '/gr/list/xq?username=' + _this.DataName + '&cerNo=' + _this.DataCerNo,
					method: "GET",
					header: {
						'token': uni.getStorageSync('token')
					},
					success(res) {
						console.log(res)
						let Xdata = res.data.data;
						if (res.data.success == true) {
							_this.openState = 2; //成功状态
							_this.alter.id = Xdata.id; //给修改参数赋值
							_this.alter.phone = Xdata.mobile; //给修改参数赋值
							_this.openData = Xdata;
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'error',
								duration: 3000
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
</style>
